<template>
  <Card title="住客分析" :loading="loading" class="wyf-card">
    <template #extra>
      <JDictSelectTag placeholder="请选择" v-model:value="params['sjfw']" dictCode="tj_sjfw" style="width: 300px" />
    </template>
    <div class="flex content-center">
      <div class="flex justify-center flex-col" style="border-right: 1px solid rgba(0, 0, 0, 0.06); min-width: 115px; width: 45%">
        <div class="flex content-center mb-40px">
          <div><a-progress type="circle" :show-info="false" :percent="50" :size="40" :stroke-color="['#1890FF']" /> </div>
          <div class="flex content-center">
            <span class="text-card pl-16px">男性</span><span class="num-card blod pl-8px">{{ zkfx.man }}</span
            ><span class="text-card other-text">{{ nanbfb / 10 || 0 }}%</span>
          </div>
        </div>
        <div class="flex content-center">
          <div><a-progress type="circle" :show-info="false" :percent="50" :size="40" :stroke-color="['#FF4D4F']" /> </div>
          <div class="flex content-center">
            <span class="text-card pl-16px">女性</span><span class="num-card blod pl-8px">{{ zkfx.woman }}</span
            ><span class="text-card other-text">{{ nvbfb / 10 || 0 }}%</span>
          </div>
        </div>
      </div>
      <div class="flex justify-center flex-col pl-22px" style="flex: 1">
        <div class="flex content-center">
          <div class="md:w-2/3"><a-progress :percent="fb0 / 10" :show-info="false" :stroke-color="['#1890FF']" :size="8" /></div>
          <div class="md:w-1/3 pb-8px pl-12px text-box flex content-center"
            ><span class="num-card blod">{{ zkfx.ageGroupDatas[0] || 0 }}</span
            ><span class="text-card">18岁以下</span>
          </div>
        </div>
        <div class="flex content-center">
          <div class="md:w-2/3"><a-progress :percent="fb1 / 10" :show-info="false" :stroke-color="['#1890FF']" :size="8" /></div>
          <div class="md:w-1/3 pb-8px pl-12px text-box flex content-center"
            ><span class="num-card blod">{{ zkfx.ageGroupDatas[1] || 0 }}</span
            ><span class="text-card">18～35</span>
          </div>
        </div>
        <div class="flex content-center">
          <div class="md:w-2/3"><a-progress :percent="fb2 / 10" :show-info="false" :stroke-color="['#1890FF']" :size="8" /></div>
          <div class="md:w-1/3 pb-8px pl-12px text-box flex content-center"
            ><span class="num-card blod">{{ zkfx.ageGroupDatas[2] || 0 }}</span
            ><span class="text-card">35～65</span>
          </div>
        </div>
        <div class="flex content-center">
          <div class="md:w-2/3"><a-progress :percent="fb3 / 10" :show-info="false" :stroke-color="['#1890FF']" :size="8" /></div>
          <div class="md:w-1/3 pb-8px pl-12px text-box flex content-center"
            ><span class="num-card blod">{{ zkfx.ageGroupDatas[3] || 0 }}</span
            ><span class="text-card">65以上</span>
          </div>
        </div>
      </div>
    </div>
  </Card>
</template>
<script lang="ts" setup>
  import { inject, computed, ref, watch, onMounted } from 'vue';
  import { Card } from 'ant-design-vue';
  import { JDictSelectTag } from '/@/components/Form';
  import { getWyfTjZkFx } from '../api';
  const props = defineProps({
    loading: Boolean,
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '300px',
    },
    ssqy: {
      type: String as PropType<string>,
      default: '',
    },
  });
  const tjfw: any = inject('tjfw');
  const zkfx = ref({
    man: 0,
    woman: 0,
    zs: 1,
    ageGroupDatas: [0, 0, 0, 0],
  });
  const params = ref({
    sjfw: '',
    tjfw: tjfw.value,
  });
  const isLoading = ref(false);
  const nvbfb = computed(() => {
    return Number((zkfx.value.woman / zkfx.value.zs).toFixed(3)) * 1000;
  });
  const nanbfb = computed(() => {
    return 1000 - nvbfb.value;
  });
  const fb0 = computed(() => {
    return Number((zkfx.value.ageGroupDatas[0] / zkfx.value.zs).toFixed(3)) * 1000;
  });
  const fb1 = computed(() => {
    return Number((zkfx.value.ageGroupDatas[1] / zkfx.value.zs).toFixed(3)) * 1000;
  });
  const fb2 = computed(() => {
    return Number((zkfx.value.ageGroupDatas[2] / zkfx.value.zs).toFixed(3)) * 1000;
  });
  const fb3 = computed(() => {
    return 1000 - fb0.value - fb1.value - fb2.value;
  });
  function getData() {
    isLoading.value = true;
    getWyfTjZkFx(params.value).then((res) => {
      console.log('住客分析:', res);
      if (res.code == 200 && res.result) {
        zkfx.value = res.result;
      }
      isLoading.value = false;
    });
  }
  // 监听 params 对象的变化并触发数据获取
  watch(
    () => params.value,
    () => {
      // 当 params 中的任何属性变化时触发
      getData();
    },
    {
      immediate: true, // 初始化时立即执行一次
      deep: true, // 深度监听对象内部变化
    }
  );
</script>
<style scoped lang="less">
  .wyf-card {
    height: 242px;
    :deep(.ant-card-head) {
      border: none;
    }
    .num-card {
      font-size: 20px;
      color: rgba(0, 0, 0, 0.85);
      line-height: 1;
      margin-right: 10px;
      align-self: center;
    }
    .text-card {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
      line-height: 22px;
      align-self: center;
    }
    .text-box {
      white-space: nowrap;
      overflow: hidden;
    }
    .other-text {
      font-size: 16px;
      color: rgba(0, 0, 0, 0.85);
      align-self: center;
    }
  }
  .blod {
    font-weight: 500;
  }
</style>
